import { Building2, Code, Users, Shield, Zap, Target } from 'lucide-react';

const EnterpriseServices = () => {
  const services = [
    {
      icon: <Code className="service-icon" />,
      title: '定制开发',
      description: '根据您的具体需求，提供完全定制化的解决方案',
      features: [
        '个性化功能开发',
        'API接口定制',
        '数据集成服务',
        '专属技术支持'
      ]
    },
    {
      icon: <Building2 className="service-icon" />,
      title: '企业部署',
      description: '私有化部署，确保数据安全和业务连续性',
      features: [
        '私有云部署',
        '数据安全保障',
        '高可用架构',
        '7×24小时监控'
      ]
    },
    {
      icon: <Users className="service-icon" />,
      title: '团队协作',
      description: '为团队提供协作工具和权限管理',
      features: [
        '多用户管理',
        '角色权限控制',
        '团队数据共享',
        '协作工作流'
      ]
    },
    {
      icon: <Shield className="service-icon" />,
      title: '安全合规',
      description: '符合行业标准的安全和合规要求',
      features: [
        '数据加密传输',
        '访问日志审计',
        '合规性认证',
        '安全评估报告'
      ]
    },
    {
      icon: <Zap className="service-icon" />,
      title: '性能优化',
      description: '针对大规模数据的高性能解决方案',
      features: [
        '负载均衡',
        '缓存优化',
        '数据库优化',
        'CDN加速'
      ]
    },
    {
      icon: <Target className="service-icon" />,
      title: '专业咨询',
      description: '提供技术咨询和最佳实践指导',
      features: [
        '技术架构咨询',
        '业务流程优化',
        '培训服务',
        '持续优化建议'
      ]
    }
  ];

  const handleContact = () => {
    // 滚动到联系表单
    const contactSection = document.getElementById('contact');
    if (contactSection) {
      contactSection.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <section className="enterprise-services">
      <div className="enterprise-services::before"></div>
      <div className="container">
        <div className="enterprise-services-header">
          <h2 className="enterprise-services-title">
            企业服务 & <span className="gradient-text">定制开发</span>
          </h2>
          <p className="enterprise-services-subtitle">
            为企业和团队提供专业的定制化解决方案，满足您的独特业务需求
          </p>
        </div>

        <div className="enterprise-services-grid">
          {services.map((service, index) => (
            <div key={index} className="enterprise-service-card">
              <div className="service-icon-wrapper">
                {service.icon}
              </div>
              <h3 className="service-title">{service.title}</h3>
              <p className="service-description">{service.description}</p>
              <ul className="service-features">
                {service.features.map((feature, featureIndex) => (
                  <li key={featureIndex}>{feature}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="enterprise-cta">
          <div className="cta-content">
            <h3>需要定制化解决方案？</h3>
            <p>我们的专业团队随时为您提供咨询和服务</p>
            <button onClick={handleContact} className="btn btn-primary">
              联系我们
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default EnterpriseServices; 